<template>
	<view class="record">
	
		<img class="top" src="../../../static/you-magic/images/topbg1.png" />
		
		<img class="botd" src="../../../static/you-magic/images/botd.png" />
		
		<!-- 我是token:{{vuex_token1}} -->
		<view class="lists" v-if="DateList && DateList.length">
			<view v-for="(item,index) in DateList" class="item">
				<view class="left">

					<image v-if="item.prize_level==1" class="pic" src="../../../static/you-magic/images/s1.png" mode=""></image>
					<image v-else-if="item.prize_level==2" class="pic" src="../../../static/you-magic/images/s2.png" mode="">
					</image>
					<image v-else class="pic" src="../../../static/you-magic/images/s3.png" mode=""></image>
					<view class="words">
						<view class="first">
							{{item.prize_name}}
						</view>
						<view v-if="item.prize_level==1" class="mid">
							价值1888元
						</view>
						<view v-else-if="item.prize_level==2" class="mid">
							价值19.9元
						</view>
						<view v-else class="mid">
							价值150元
						</view>
						<view class="sec">
							<!-- 领取时间： -->
							{{item.draw_time}}
						</view>
					</view>
				</view>
				<view class="right">
					
					<view  @click="get(item)" class="duihuan">
						立即兑换
					</view>
					<!-- <image @click="get(item)" class="dh" src="../../../static/you-magic/images/s5.png" mode="">
					</image> -->
					<!-- pageTwo=true -->
				</view>
			</view>
		</view>
		<view v-else  style="margin: 50px 0;">
			<u-empty text="暂无数据" mode="data"></u-empty>
		</view>


		<u-mask :show="pageTwo">
			<view v-if="pageTwo" class="pagetwo">
				<view class="bgs">
					<image @click="pageTwo=false" class="close"
						src="../../../static/you-magic/images/close.png" mode=""></image>
					<!-- 一等奖开始 -->
					<view v-if="level==1" class="ydj">
						<img src="../../../static/you-magic/images/j1.png" alt="">
						<onepage :id="curid" />
					</view>
					<!-- 一等奖结束 -->
					<!-- 二等奖开始 -->
					<view v-else-if="level==2" class="ydj edj">
						<!-- <image src="../../../static/you-magic/images/j2.png" mode=""></image> -->
						<img src="../../../static/you-magic/images/j2.png" alt="">
						<twopage :prize_code="prize_code" :copyCode="copyCode" :id="curid" />
					</view>

					<!-- 二等奖结束 -->
					<!-- 三等奖开始 -->
					<view v-else class="ydj edj sdj">
						<img src="../../../static/you-magic/images/j2.png" alt="">
						<threepage :prize_code="prize_code" :copyCode="copyCode" :id="curid" />
					</view>

					<!-- 三等奖结束 -->
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import onepage from "../../one.vue";
	import twopage from '../../two.vue';
	import threepage from '../../three.vue';

	export default {
		components: {
			onepage,
			twopage,
			threepage
		},
		data() {
			return {
				pageTwo: false,
				DateList:[],
				level:0,
				curid:'',
				copyCode:'',
				prize_code:''
			}
		},
		methods:{
			get(item){
				console.log(item,55555)
				
				
				if(item.copy_btn!='未领取' && item.prize_level!=3){
					this.$u.toast('奖品已被领取过！');
					return;
				}else{
					this.level = item.prize_level
					this.curid = item.id
					this.pageTwo = true
					this.copyCode = item.bind_ercode
					this.prize_code = item.prize_code
				}
				
			}
		},
		onShow() {
			this.$u.api
				.myPrize({
					openid: this.vuex_token1,
					// openid:'oykLd6lDBrTf8Mgva-7TlQ8QfwcA',
					
				})
				.then((res) => {
					console.log(res.list, 88888);
					this.DateList = res.list
				});
		}
		
	}
</script>

<style>
	page {
		padding-bottom: 50px;
		background-image: linear-gradient(to right, #004d3d, #042821);
	}
</style>
<style scoped lang="scss">
	.botd{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		z-index: 9;
	}
	.duihuan{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 175rpx;
		height: 55rpx;
		background: linear-gradient(90deg, #F4D756, #F1BF51);
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(135,94,30,0.2);
		border-radius: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 25rpx;
		color: #020202;
	}
	.top {
		display: block;
		width: 100%;
		margin: 0 auto;
		height: auto;
	}

	.lists {
		// background: linear-gradient(202deg, #FFF9EE, #F8E4C3);
		// border-radius: 20rpx;
		// border: 1px solid #DEB97C;
		min-height: 70vh;
		margin-top: -20px;
		padding: 0rpx 0;

		.item {
			margin: 0 auto;
			width: 632rpx;
			height: 163rpx;
			background: url("../../../static/you-magic/images/s4.png") no-repeat;
			background-size: cover;
			margin-bottom: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				display: flex;
				align-items: center;
				// width: 314rpx;

				.pic {
					width: 134.95rpx;
					height: 134.95rpx;
					margin-left: 28rpx;
					margin-right: 12rpx;
				}

				.words {
					flex: 1;

					.first {
						// font-family: Source Han Sans CN;
						// font-weight: 800;
						// font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 19rpx;
						color: #000000;
						// color: #FDFCFA;
						// background: linear-gradient(0deg, #A87733 0%, #D1A34B 100%);
						// -webkit-background-clip: text;
						// -webkit-text-fill-color: transparent;
					}
					.mid{
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 25rpx;
						color: #B5171E;
					}

					.sec {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 15rpx;
						color: #303030;
						margin-top: 11rpx;
					}
				}
			}

			.right {

				width: 35%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dh {
					width: 132rpx;
					height: 44rpx;
				}
			}
		}

	}
</style>
<style>
	.pagetwo {
		position: relative;
		width: 100%;
		/* max-width: 375PX !important; */
		margin: 0 auto;
	}






	@keyframes breathe {
		0% {
			opacity: 0.5;
			transform: scale(1);
		}

		50% {
			opacity: 1;
			transform: scale(1.2);
		}

		100% {
			opacity: 0.5;
			transform: scale(1);
		}
	}



	.Mybgs {
		/* width: 100%; */
		/* height: 100vh; */
		/* background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: cover; */
		width: 100%;
		height: 100vh;
		/* height: 100vh; */
		display: block;

	}

	/* 	page {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background: url('../static/you-magic/images/1.png') no-repeat;
		background-size: 100% 100%;
	} */
</style>
<style lang="scss">
	.mypageone {
		position: relative;

		.close1 {
			display: block;

			width: 56rpx;
			height: 56rpx;

			margin: 20rpx 0 20rpx auto;
		}

		.beisao {
			width: 622rpx;
			height: 546rpx;
		}
	}


	.logos {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;

		width: 100%;

		img {
			width: 100%;
			display: block;
			margin: 0 auto;
		}
	}

	.pagetwo {
		position: relative;
	}

	.contents {
		position: absolute;
		top: 187rpx;
		left: 72rpx;
		z-index: 88;
		right: 54rpx;
		bottom: 0;

		.tit {
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 29rpx;
			color: #FEEFD2;
			// line-height: 38rpx;
			margin-top: 10rpx;
			text-align: center;
		}

		.kefu {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 30rpx;
			color: #FEF8C4;
			line-height: 33rpx;
			text-align: center;
			position: absolute;
			bottom: 48rpx;
			width: 100%;
		}

		.jpmc {
			position: relative;
			z-index: 3;
			margin: 43rpx 0 35rpx;
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 42rpx;
			color: #3D211F;
			line-height: 61rpx;
			text-align: center;

			.txt1 {
				font-size: 30rpx;
			}

			.red {
				color: #CC1D00;
			}
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}


		.guanghuan {
			position: relative;
			width: 483rpx;
			height: 459rpx;
			margin: 0 auto;
			margin-top: -60px;

			.bg {
				animation: rotate 3s linear infinite;
				position: relative;

				z-index: 1;
				width: 100%;
				height: 100%;
			}

			.main {


				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 5;

				>.pic {
					display: block;
					margin: 100rpx auto 30rpx;
					width: 293rpx;
					height: 285rpx;
				}
			}

			.btns3 {
				width: 275rpx;
				height: 63rpx;
				margin: 0 auto;
				display: block;
				animation: breathing 0.5s ease-in-out infinite;

			}

		}
	}

	/deep/ .u-checkbox__icon-wrap {
		border: 1rpx solid #fff !important;
	}

	.read {
		position: absolute;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		right: 0;

		text {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.swiper {
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 455rpx;
		// top: 480rpx;

		/deep/ .u-swiper-item {
			justify-content: center !important;
		}

		.sweiperitem {
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 24rpx;
			transform: scale(0.7);
			color: #FAEBCC;
			text-align: center;
		}

		.line {
			// position: absolute;
			width: 502rpx;
			height: 25rpx;
			margin: 0 0 0 128rpx;
			// left: 128rpx;
			// top: 491rpx;
		}
	}


	.run {

		.niu {

			position: absolute;
			left: 12rpx;
			top: 594rpx;
			width: 121rpx;
			height: 156rpx;


		}

		.handle {
			right: 34rpx;
			top: 534rpx;
			position: absolute;
			width: 251rpx;
			height: 251rpx;
			animation: breathing 1s ease-in-out infinite;
			border-radius: 50%;
			// box-shadow: 0 0 0 0 rgba(249, 237, 163, 1.0);

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.hand {
		width: 20px;
		display: block;
		height: auto;
		margin-left: 10px;
	}

	.step {
		border-radius: 50%;
		width: 24rpx;
		height: 24rpx;
		background: #FDE396;
		font-family: FZLTZCHK--GBK1, FZLTZCHK--GBK1;
		font-weight: normal;
		font-size: 16rpx;
		color: #C9332C;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step1 {
		position: absolute;
		right: -20px;
		top: -10px;
	}


	.add1 /deep/ .u-mode-center-box {
		background: none;
		height: 100rpx;
	}

	.rulesMask {
		margin: 0 30rpx;

		.words {
			line-height: 25px;
			font-size: 26rpx;
		}
	}

	.tits {
		padding: 250px 0 10px;
		text-align: center;
		font-size: 17px;
	}

	.bgs {
		position: relative;

		.dhm {
			position: absolute;
			bottom: 50rpx;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
			font-weight: normal;
			font-size: 24rpx;
			color: #FDDF8C;
			// line-height: 27rpx;
			// margin: 20px 0;
		}




		.ydj {

			img {
				display: block;
				width: 100%;
				height: auto;
				margin: 50px auto;
			}
		}

		.edj {
			img {
				display: block;
				width: 100%;
				// height: auto;
				margin: 10px auto;
			}

			.pic {
				width: 156rpx !important;
				height: 290rpx !important;
			}

			.addkefu {
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				margin: 95rpx auto 29rpx;
			}

			.macode {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 30rpx;
				color: #FEF8C4;
				line-height: 33rpx;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 174rpx;
					height: 40rpx;
					background: linear-gradient(-68deg, #FBE1B1, #F2C96A, #E7CA8F, #FFF1D4, #F5D486, #FFEFCE);
					border-radius: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 27rpx;
					color: #D2381C;
					margin-left: 15rpx;
				}
			}

			.tips {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 23rpx;
				color: #FEF8C4;
				line-height: 33rpx;
				margin-top: 24rpx;
				text-align: center;
			}

			.ewmCont {
				width: 201rpx;
				height: 201rpx;
				background: #FCE295;
				border-radius: 10rpx;
				margin: 21rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 183rpx;
					height: 183rpx;
					border-radius: 10rpx;
				}
			}
		}

		.sdj {
			.pic {

				width: 296rpx !important;
				height: 290rpx !important;
				animation: breathing 0.5s ease-in-out infinite;
			}

			.btns3 {
				animation: breathing 0s ease-in-out infinite !important;
			}
		}



		.close {
			position: absolute;
			width: 46rpx;
			height: 46rpx;
			right: 77rpx;
			top: 30rpx;
			z-index: 8;
		}




	}


	/deep/ .u-checkbox__label {
		margin-right: 0;
		margin-left: 13rpx;
		font-family: FZLTZHK--GBK1, FZLTZHK--GBK1;
		font-weight: normal;
		font-size: 20rpx;
		color: #FEDB84;
		line-height: 52rpx;
		text-align: center;
		font-style: normal;
	}







	@keyframes breathing {
		0% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}

		50% {
			// box-shadow: 0 0 10px 10px rgba(248, 244, 122, 0);
			transform: scale(1.1);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(248, 244, 122, 0.7);
			transform: scale(1);
		}
	}

	.handleBox {
		position: absolute;
		right: 0;
		top: 77rpx;
		z-index: 8;

		.sameBox {
			text-align: center;
			margin-bottom: 10rpx;
			width: 43rpx;
			height: 131rpx;
			background: rgba(26, 172, 143, 0.47);
			border-radius: 18rpx 0 0 18rpx;
			border: 2rpx solid #1AAC8F;
			font-family: OPPOSans;
			font-weight: normal;
			font-size: 23rpx;
			color: #24D8B5;
		}
	}
</style>
